<template>
  <div flex-col>
    <!-- 搜索区域 -->
    <div h-75px bd-fff pt-30px pl-20px pr-20px mb-10px flex justify-between items-center>
      <div>
        <!-- <el-button
          plain
          text-15px
          type="primary"
          style="
            font-size: 15px;
            color: #fff;
            background: linear-gradient(
              90deg,
              rgba(0, 108, 222, 1) 0%,
              rgba(41, 182, 244, 1) 100%,
              rgba(0, 163, 235, 1) 99%
            );
            border: none;
          "
          @click="handleOpenDialog()"
        >
          新增角色
        </el-button> -->
        <!-- <el-button type="danger" text-15px :disabled="ids.length === 0" @click="handleDelete()">
          删除
        </el-button> -->
      </div>
      <div flex items-center>
        <div mr-10px>
          <el-select
            v-model="queryParams.readed"
            style="width: 100px"
            placeholder="消息状态"
            clearable
          >
            <el-option label="已读" :value="true" />
            <el-option label="未读" :value="false" />
          </el-select>
        </div>
        <el-button type="primary" text-15px z-2 :icon="Search" @click="handleQuery">搜索</el-button>
        <el-button
          plain
          text-15px
          :icon="RefreshRight"
          style="color: rgba(0, 108, 222, 1); border: 1px solid rgba(0, 108, 222, 1)"
          @click="handleResetQuery"
        >
          清空
        </el-button>
      </div>
    </div>

    <el-table
      ref="dataTableRef"
      v-loading="loading"
      :data="messageList"
      :header-cell-style="{
        backgroundColor: '#F1F3F7',
        color: '#000',
      }"
      highlight-current-row
      :stripe="true"
      :border="false"
    >
      <el-table-column label="标题" prop="title" />
      <el-table-column label="内容" prop="content" min-width="200" />
      <el-table-column label="时间" prop="createTime" />

      <el-table-column label="状态" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.readed === true" type="success">已读</el-tag>
          <el-tag v-else type="info">未读</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <!-- <el-button
            type="primary"
            size="small"
            link
            icon="position"
            @click="handleOpenAssignPermDialog(scope.row)"
          >
            分配权限
          </el-button> -->
          <el-button
            type="primary"
            size="small"
            link
            icon="check"
            :disabled="scope.row.readed === true"
            @click="handleRead(scope.row.id)"
          >
            已读
          </el-button>
          <el-button
            type="danger"
            size="small"
            link
            icon="delete"
            @click="handleDelete(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      ref="paginationRef"
      v-model:total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      background
      justify-center
      @pagination="handleQuery"
    />
  </div>
</template>

<script setup lang="ts">
import { debounce } from "lodash-es";
import { Search, RefreshRight } from "@element-plus/icons-vue";
import NoticeAPI, { NoticePageVO, NoticePageQuery } from "@/api/system/notice.api";

defineOptions({
  name: "Message",
  inheritAttrs: false,
});

const dataTableRef = ref();
const paginationRef = ref();

const loading = ref(false);
const total = ref(0);

const queryParams = reactive<NoticePageQuery>({
  pageNum: 1,
  pageSize: 10,
});

// 角色表格数据
const messageList = ref<NoticePageVO[]>();

// 查询
function handleQuery() {
  loading.value = true;
  NoticeAPI.getPage(queryParams)
    .then((data) => {
      messageList.value = data.records;
      total.value = Number(data.total);
    })
    .finally(() => {
      loading.value = false;
    });
}

// 重置查询
function handleResetQuery() {
  queryParams.pageNum = 1;
  queryParams.readed = undefined;
  handleQuery();
}

// 删除消息
function handleDelete(noticeId: string) {
  ElMessageBox.confirm("确认删除已选中的数据项?", "确认信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    showClose: false,
    confirmButtonClass: "message-box-confirm-button",
    cancelButtonClass: "message-box-cancel-button",
  }).then(
    () => {
      loading.value = true;
      NoticeAPI.deleteById(noticeId)
        .then(() => {
          ElMessage.success("删除成功");
          handleResetQuery();
        })
        .finally(() => (loading.value = false));
    },
    () => {
      ElMessage.info("已取消删除");
    }
  );
}

// 阅读消息
function handleRead(id: string) {
  NoticeAPI.read(id).then(() => {
    handleResetQuery();
  });
}

const setAdaptive = async () => {
  await nextTick();
  if (!dataTableRef.value) return;
  console.log(dataTableRef.value, "setAdaptive");
  const tableWrapper = dataTableRef.value.$el;
  let offsetBottom = 20;
  let paginationHeight = 0;

  // if (isPlainObject(props.adaptive)) {
  //   offsetBottom = props.adaptive.offsetBottom ?? offsetBottom;
  // }
  paginationHeight = paginationRef.value.$el.offsetHeight;

  tableWrapper.style.height = `${
    window.innerHeight - tableWrapper.getBoundingClientRect().top - offsetBottom - paginationHeight
  }px`;
};

const debounceSetAdaptive = debounce(setAdaptive, 60);

onMounted(() => {
  handleQuery();
  setAdaptive();
  window.addEventListener("resize", debounceSetAdaptive);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", debounceSetAdaptive);
});
</script>
